<template>
    <div class="content-box">
        <heading class="title" grade="1">赛程</heading>
        <!--赛程日期-->
        <date-slider v-model="activeIndex" :list="dateList" @change="handleCheck"/>
        <div v-if="gameList.length">
          <!--赛程场地-->
          <place-group :list="matchList" v-model="selectedIndex" @change="handleSelect"/>
          <ul class="match-list small">
            <li v-for="(item,$index) in gameList" class="match-item  clearfix" 
                v-bind:class="{odd:$index%2==0}"
                :key="item">
                <el-row>
                  <el-col :span="4">
                    <div class="match-date">
                        <p>{{new Date(item.startTime).format("yyyy-MM-dd hh:mm:ss")}}</p>
                        <p>第{{item.grade}}轮</p>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <div class="team">
                      <div class="host tm-name">
                          <p>{{item.hostUserName}}</p>
                          <template v-if="item.status==6 && Number(item.homeScore)==0">
                            <div class="giveup">已弃权</div>
                          </template>                          
                          <el-button type="link" 
                            v-if="!item.homeScore && item.status!==4 && item.status!==6"
                            @click="giveUp($event, item,'host')">弃权</el-button>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="2">
                     <x-img :src="item.hostIconUrl"/>
                  </el-col>
                  <el-col :span="3">
                    <div class="match-vs">
                      <p v-if="!item.homeScore && (!item.guestScore)" class="match-vers">vs</p>
                      <p v-if="item.end|| item.guestScore" class="match-vers">{{item.homeScore}}:{{item.guestScore}}</p>
                      <el-button type="link" v-if="!item.homeScore && item.status!==4 && item.status!==6" 
                        @click="openScore($event, item)">录入比分</el-button>
                      <!--<el-button type="link" 
                        v-if="(item.homeScore|| item.guestScore) && item.status!==4 && item.status!==6" 
                        @click="customConfirm($event, '', item)">修改比分</el-button> -->
                    </div>
                  </el-col>
                  <el-col :span="2">
                      <x-img :src="item.guestIconUrl" />
                  </el-col>
                  <el-col :span="4">
                    <div class="team">
                      <div class="tm-name">
                          <p>{{item.guestUserName}}</p>
                          <template v-if="item.status==6 && item.guestScore==0">
                            <div class="giveup">已弃权</div>
                          </template> 
                          <el-button v-if="!item.homeScore && item.status!==4 && item.status!==6"
                            type="link"  @click="giveUp($event, item,'guest')">弃权</el-button>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="5">
                    <!--status: 0、初始化（2轮以上赛事默认使用），1、待比赛，2、已结束，3、延迟比赛，4、取消比赛，5轮空-->
                    <div v-if="item.status!==4 &&  item.status!==6">
                      <el-button v-show="!item.homeScore" class="tiny" size="small" @click="editGame(item)">编辑比赛</el-button>
                      <el-button v-show="!item.homeScore" class="tiny" size="small" @click="showCancel(item)">取消比赛</el-button>                                          
                    </div>
                    <div v-if="item.status==4">
                      <span  class="canceled">已取消</span>
                    </div>
                    <div v-if="item.status==6">
                      <span class="canceled" v-if="item.homeScore==0">主队弃权</span>
                      <span class="canceled" v-if="item.guestScore==0">客队弃权</span>
                    </div>
                  </el-col>
                </el-row>                
            </li>
           </ul>

           <div class="button-box">
             <el-button type="primary" @click="exportExcel()">导出Excel</el-button>
           </div>
        </div>

        <div class="no-match" v-else>
            没有比赛
        </div>
        
        
        <!-- 取消比赛弹框 --> 
        <Dialog 
          :visible="cancelVisible"
          :title="'请选择取消比赛的原因'"
          :cancelText="'取消'"
          :sureText="'确认'"
          v-on:cancel="hideMessageBox()"
          v-on:confirm="cancelGame"
          v-on:close="hideMessageBox()">
          <el-radio-group v-model="cancelCase">
            <el-radio v-for="item in cancelOptions" :key="item.value" class="radio" :label="item.value">{{item.label}}</el-radio>
          </el-radio-group>
          <el-row style="margin-top:10px;">
            <el-col :span="3">
              <label>备注</label>
            </el-col>
            <el-col :span="21">
              <el-input  type="textarea" :rows="2"  placeholder="请输入备注"  v-model="remark">
              </el-input>
            </el-col>
          </el-row>  
        </Dialog>

        <!--录入大比分弹框-->
        <Dialog 
          :visible="scoreVisible"
          :title="'请输入最终比分'"
          :cancelText="'取消'"
          :sureText="'确认'"
          v-on:cancel="closeScore()"
          v-on:confirm="checkPoint()"
          v-on:close="closeScore()">
          <div class="relative">
            <div style="margin-bottom:10px;">
              <label class="game-name hidden">{{game.hostUserName}}</label>
              <el-input class="score-input" v-model="homeScore" :maxlength="3">
                <template slot="append">分</template>
              </el-input>
            </div>
            <div>
              <label class="game-name hidden">{{game.guestUserName}}</label>
              <el-input class="score-input" v-model="guestScore" :maxlength="3">
                <template slot="append">分</template>
              </el-input>
            </div>
            <el-popover
              class="pop-over"
              ref="popover5"
              placement="top"
              width="200"
              v-model="popVisible">
              <p class="warnning">比分一经录入不能再次修改，是否确认录入？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="popVisible = false">取消</el-button>
                <el-button type="primary" size="mini" @click="scoreWrite()">确定</el-button>
              </div>        
            </el-popover>
          </div>         
        </Dialog>    

        <score-dialog 
          :visible="scoreDetailsVisible"
          :matchType="'男单'"
          :host="'马林'"
          :guest="'马龙'"
          :totalDish="7">

        </score-dialog>

    </div>
</template>

<script>
  import Api from 'api/race'
  import {downloadFile, matchFormat} from 'utils'
  import DateSlider from './components/DateSlider'
  import PlaceGroup from './components/PlaceGroup'
  import Dialog from '../components/Dialog'
  import ScoreDialog from './components/ScoreDialog'
  import {mapGetters} from 'vuex'
  export default {
    components: {
      DateSlider,
      PlaceGroup,
      Dialog,
      ScoreDialog
    },
    computed: {
      rightIndex () {
        return this.dateIndex >= this.dateList.length - 7
      },
      ...mapGetters({
        race_detail: 'race_detail'
      })
    },
    mounted () {
      this.getPreview()
    },
    data () {
      return {
        popVisible: false,
        scoreDetailsVisible: false, // 小比分弹框
        dateList: [],
        activeIndex: {},
        selectedIndex: 0,
        dateIndex: 0,
        preDisable: true,
        nextDisable: false,
        matchList: [],
        gameList: [],
        homeScore: '',
        guestScore: '',
        cancelCase: 1, // 取消原因
        remark: '',  // 备注
        cancelVisible: false,  // 取消比赛弹框
        scoreVisible: false, // 录入比分弹框
        cancelOptions: [
          {label: '天气不好', value: 0},
          {label: '场地安排原因', value: 1},
          {label: '其他', value: 2}
        ],
        canceledGame: {},
        game: {}, // 录入比分的比赛
        scoreList: [
          {
            hostScore: 21,
            guestScore: 18
          },
          {
            hostScore: 21,
            guestScore: 17
          },
          {
            hostScore: 21,
            guestScore: 16
          },
          {
            hostScore: 21,
            guestScore: 17
          },
          {
            hostScore: 21,
            guestScore: 16
          },
          {
            hostScore: 21,
            guestScore: 17
          },
          {
            hostScore: 21,
            guestScore: 16
          }
        ]
      }
    },
    methods: {
      checkPoint () {
        if ((Number.isInteger(parseInt(this.homeScore))) && (Number.isInteger(parseInt(this.guestScore))) &&
          parseInt(this.homeScore) >= 0 && parseInt(this.guestScore) >= 0) {
          this.popVisible = true
        } else {
          this.$message({
            type: 'error',
            message: '比分请输入非负整数'
          })
          return false
        }
      },
      hideMessageBox () {
        this.cancelVisible = false
      },
      // 获取赛程预览导航栏
      getPreview () {
        Api.getSchedulePreview({matchId: this.$route.query.id}, this).then((data) => {
          this.dateList = data.data || []
          if (this.dateList.length) {
            this.activeIndex = this.dateList[0]
            this.getScheduleInfo(this.activeIndex)
          }
        })
      },
      // 获取某一天的赛程信息
      getScheduleInfo (date) {
        Api.getScheduleInfo({
          matchId: this.$route.query.id,
          day: date.scheduleDate
        }, this).then((data) => {
          this.matchList = data.data
          this.gameList = this.matchList[0].matchScheduleResp
          this.selectedIndex = 0
        })
      },
      handleCheck (obj) {
        var item = obj || new Date().format()
        if (item.matchNumber > 0) {
          this.getScheduleInfo(item)
        } else {
          this.gameList = []
          this.matchList = []
        }
      },
      handleSelect (index) {
        this.selectedIndex = index
        this.gameList = this.matchList[index].matchScheduleResp
      },
      // 比赛弃权
      giveUp (event, item, team) {
        let isHost = team === 'host' ? 1 : 0
        let text = isHost ? '主队：' + item.hostUserName : '客队：' + item.guestUserName
        this.$confirm('确认 ' + text + ' 弃权?', '提示', {
          type: 'warning'
        }).then(() => {
          Api.matchGiveup({
            id: item.id,
            hostUserId: item.hostUserId,
            guestUserId: item.guestUserId,
            status: 6,  // 4：取消比赛，5：轮空，6：弃权
            result: isHost ? 3 : 4 // 3：主队弃权，4：客队弃权
          }, {context: event.target}).then((res) => {
            item.end = 1
            item.status = 6
            item.homeScore = res.data.hostScore
            item.guestScore = res.data.guestScore
          }).catch((err) => {
            this.$message({
              type: 'warning',
              message: err.msg
            })
          })
        }).catch(() => {
        })
      },
      // 录入比分
      customConfirm (event, title, matchItem) {
        const h = this.$createElement
        if (matchItem.homeScore && matchItem.guestScore) {
          this.homeScore = matchItem.homeScore
          this.guestScore = matchItem.guestScore
        } else {
          this.homeScore = ''
          this.guestScore = ''
        }
        this.$msgbox({
          title: title || '请输入最终比分',
          message: h('div', {
            style: {
              textAlign: 'center'
            }
          }, [
            h('div', {
              style: {
                marginBottom: '10px'
              }
            }, [
              h('label', {}, matchItem.hostUserName),
              h('el-input', {
                'class': {
                  scoreinput: true
                },
                attrs: {
                  id: 'host-score',
                  'value': ''
                }
              }, [
                h('template', {slot: 'append'}, '分')
              ])
            ]),
            h('div', {}, [
              h('label', {}, matchItem.guestUserName),
              h('el-input', {
                style: 'width:90px;margin:0 5px',
                attrs: {
                  id: 'guest-score',
                  'value': ''
                }
              }, [
                h('template', {slot: 'append'}, '分')
              ])
            ])
          ]),
          showCancelButton: true,
          beforeClose: (action, instance, done) => {
            let hostInput = document.querySelector('#host-score').children[0]
            let guestInput = document.querySelector('#guest-score').children[0]
            let hscore = null
            let gscore = null
            if (action === 'confirm') {
              hscore = hostInput.value
              gscore = guestInput.value
              if (!/^[0-9]*$/.test(hscore) || !/^[0-9]*$/.test(gscore)) {
                this.$message({
                  type: 'error',
                  message: '比分请输入数字'
                })
                return
              }
              Api.scoreWrite({
                id: matchItem.id,
                hostScores: hscore,
                guestScores: gscore
              }, {context: event.target}).then((res) => {
                instance.confirmButtonLoading = true
                instance.confirmButtonText = '执行中...'
                setTimeout(() => {
                  done()
                  setTimeout(() => {
                    instance.confirmButtonLoading = false
                    matchItem.homeScore = hscore
                    matchItem.guestScore = gscore
                    this.homeScore = ''
                    this.guestScore = ''
                  }, 300)
                }, 1000)
              }).catch((err) => {
                this.$message({
                  type: 'warning',
                  message: err.msg
                })
              })
            } else {
              done()
            }
          }
        })
      },
      // open比分录入弹框
      openScore (event, item) {
        this.game = item
        if (item.behalfSmallScore) { // 小比分
          let obj = matchFormat(this.race_detail)
          let scoreList = []
          for (var i = 0; i < obj.total; i++) {
            scoreList.push({
              homeScore: '',
              guestScore: '',
              scoreSort: i
            })
          }
          this.scoreDetailsVisible = true
        } else {
          this.scoreVisible = true
        }
      },
      // 关闭弹框并重置 主队客队比分
      closeScore () {
        this.scoreVisible = false
        this.homeScore = ''
        this.guestScore = ''
        this.popVisible = false
      },
      // 比分录入
      scoreWrite () {
        if ((Number.isInteger(parseInt(this.homeScore))) && (Number.isInteger(parseInt(this.guestScore))) &&
          parseInt(this.homeScore) >= 0 && parseInt(this.guestScore) >= 0) {
          Api.scoreWrite({
            id: this.game.id,
            hostScores: this.homeScore,
            guestScores: this.guestScore
          }, {context: event.target}).then((res) => {
            setTimeout(() => {
              this.game.homeScore = this.homeScore
              this.game.guestScore = this.guestScore
              this.closeScore()
            }, 100)
          }).catch((err) => {
            this.$message({
              type: 'warning',
              message: err.msg
            })
          })
        } else {
          this.$message({
            type: 'error',
            message: '比分请输入非负整数'
          })
          return false
        }
      },
      showCancel (item) {
        this.canceledGame = item
        this.cancelVisible = true
      },
      // 取消比赛
      cancelGame () {
        Api.matchCancel({
          id: this.canceledGame.id,
          cancleCase: this.cancelOptions[this.cancelCase].label,
          remark: this.remark
        }, {context: this}).then((res) => {
          this.canceledGame.status = 4
          this.$message({
            type: 'success',
            message: '取消成功!'
          })
          this.hideMessageBox()
          this.remark = ''
          this.activeIndex.matchNumber--
        }).catch((err) => {
          this.$message({
            type: 'warning',
            message: err.msg
          })
          this.hideMessageBox()
        })
      },
      // 编辑比赛
      editGame (item) {
        this.$store.commit('MATCH_DETAIL', item)
        this.$router.push({
          path: '/race/detail/manage/matchedit',
          query: {
            id: this.$route.query.id,
            gameId: item.id,
            isRun: this.$route.query.isRun,
            tasktype: this.$route.query.tasktype
          }
        })
      },
      exportExcel () {
        var url = '/api/match/schedule/export/schedulePrevInfo?matchId=' + this.$route.query.id // + '&day=' + this.activeIndex.scheduleDate
        var _this = this
        downloadFile(url, '赛程预览.xls', function (blob) {
          _this.$message({
            message: '下载出错，请稍后再试',
            type: 'warning'
          })
        })
      }
    }
  }
</script>

<style scoped rel="stylesheet/scss" lang="scss">
@import '../../styles/var.scss'; 
/* 比赛列表 */
@import '../../styles/scheduleEdit.scss';
</style>
<style lang="scss">
.pop-over{
  .el-popover{
    right: 20px;
    top: 68px;
    display: block;
  }
  .warnning{
    line-height: 20px;
    margin-bottom: 5px;
    font-size: 14px;
  }
}
</style>
